<template>
  <div ref="dom" class="charts chart-radar"></div>
</template>

<script>
import * as echarts from "echarts";
import tdTheme from "./theme.json";
import { on, off } from "@/libs/tools";
// echarts.registerTheme("tdTheme", tdTheme);
export default {
  name: "ChartRadar",
  props: {
    value: Array,
    text: String,
    subtext: String,
    series: Array,
    xAxisData: Array,
    seriesData: Array,
    grid: Object,
    legend: Object,
    tooltip: Object,
    indicator: Array,
    radius: Number,
    num: Number,
    shape: String,
    color: String,
    max: Number,
    areaColor: Array,
  },
  data() {
    return {
      dom: null,
    };
  },
  watch: {
    value: {
      deep: true,
      handler(val) {
        this.intChart();
      },
    },
    series: {
      deep: true,
      handler(val) {
        this.intChart();
      },
    },
  },
  methods: {
    resize() {
      this.dom.resize();
    },
    intChart() {
      this.$nextTick(() => {
		var value = this.value;
		
        var option = {
          radar: {
            // shape: 'circle',
            name: {
              textStyle: {
                color: "#19FFE5",
              },
            },
            splitArea: {
              areaStyle: {
                color: this.areaColor,
                shadowColor: "rgba(0, 100, 0, 0.3)",
              },
            },
            center: ["50%", "50%"],
            radius: "50%",
            indicator: [
              { name: "研究实力", max: this.max },
              { name: "转化能力", max: this.max },
              { name: "学术会议影响", max: this.max },
              { name: "研究趋势匹配", max: this.max },
              { name: "研究内容热度", max: this.max },
              { name: "合作者影响", max: this.max },
            ],
            // shape: this.shape,
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: ["#19FFE5", "#19FFE5"],
              },
            },
            axisLine: {
              lineStyle: {
                color: "#19FFE5",
              },
            },
          },
          series: [
            {
              type: "radar",
              data: [
                {
                  value: value,
                  name: "数据",
                  lineStyle: {
                    normal: {
                      color: this.color,
                    },
                    emphasis: {
                      color: this.color,
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: this.color,
                    },
                    emphasis: {
                      color: this.color,
                    },
                  },
                  areaStyle: {
                    normal: {
                      color: this.color,
                    },
                    emphasis: {
                      color: this.color,
                    },
                  },
                },
              ],
            },
          ],
        };
        this.dom = echarts.init(this.$refs.dom, "tdTheme");
        this.dom.setOption(option, true);
        on(window, "resize", this.resize);
      });
    },
  },
  mounted() {
    this.intChart();
  },
  beforeDestroy() {
    off(window, "resize", this.resize);
  },
};
</script>
